<template>
  <div
    class="PaperTitle arial"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="box" :style="{ height: Height + 'px' }">
      <div class="text arial">{{ $t("login.Welcome") }}</div>
      <div class="login">
        <div class="title">{{ $t("login.LOGIN") }}</div>
        <div class="text2">{{ $t("login.YoulD") }}</div>
        <el-input
          class="int1"
          :placeholder="$t('login.EnterYoulD')"
          v-model="query.user_code"
          clearable
        >
        </el-input>
        <div class="text3">{{ $t("login.Password") }}</div>
        <el-input
          class="int2"
          :placeholder="$t('login.EnterPassword')"
          v-model="query.user_password"
          show-password
        >
        </el-input>
        <div class="text4 cursor" @click="ForgotFn">
          {{ $t("login.Forgotpassword") }}
        </div>
        <div class="btn cursor" @click="btnFn">{{ $t("login.Continue") }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/login.js"; // 登录接口
export default {
  data() {
    return {
      Height: null,
      loading: false, // loading
      query: {
        user_code: "", // 用户账号
        user_password: "", // 密码
      },
      user: {
        user_id: "",
      },
    };
  },
  created() {
    this.Height = sessionStorage.getItem("heights");
  },
  mounted() {
    console.log(this.$router);
  },
  methods: {
    // 跳转到重置密码页面
    ForgotFn() {
      this.$router.push({
        path: "/reset",
      });
    },
    // 登录按钮
    btnFn() {
      this.login(this.query);
    },

    // 登录接口
    async login(query) {
      this.loading = true;
      try {
        const data = await login(query);
        if (data.result_code == 200) {
          this.user.user_id = data.data.user_id;
          sessionStorage.setItem("kid", this.user.user_id);

          this.$message({
            type: "success",
            message: "Welcome to Oriental Community !",
          });
          sessionStorage.setItem("change", true);
          this.$router.push({
            path: "/home/omc",
          });
        } else {
          this.$message({
            type: "error",
            message: data.msg,
          });
        }
        this.loading = false;
      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    },
  },
};
</script>

<style  lang="scss" scoped>
.PaperTitle {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}
.box {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: url("~@/assets/imgs/bg.png") no-repeat;
  background-size: 100% 100%;
}
.text {
  box-sizing: border-box;
  width: 512px;
  height: 127px;
  font-size: 50px;
  font-weight: bold;
  color: #ffffff;
  line-height: 80px;
  margin: 71px 0 0 232px;
}
.login {
  position: absolute;
  top: 71px;
  right: 232px;
  box-sizing: border-box;
  width: 768px;
  height: 725px;
  background: #ffffff;
  border-radius: 30px;
}
.title {
  position: absolute;
  top: 104px;
  left: 109px;
  width: 145px;
  height: 36px;
  font-size: 48px;
  font-weight: bold;
  color: #1a1a1a;
}
::v-deep .el-input {
  width: 582px;
}
::v-deep .el-input__inner {
  width: 582px;
  height: 78px;
  border: 1px solid #999999;
  border-radius: 20px;
  font-size: 28px;
  font-weight: 400;
  color: #999999;
  line-height: 110px;
}
::v-deep .el-input__suffix {
  .el-icon-circle-close:before {
    font-size: 32px;
    line-height: 70px;
    padding-right: 100px;
  }
}
.text2 {
  position: absolute;
  top: 185px;
  left: 109px;
  width: 185px;
  height: 22px;
  font-size: 28px;
  font-weight: 400;
  color: #666666;
}
.int1 {
  position: absolute;
  top: 231px;
  left: 94px;
}
.text3 {
  position: absolute;
  top: 330px;
  left: 109px;
  width: 185px;
  height: 22px;
  font-size: 28px;
  font-weight: 400;
  color: #666666;
}
.int2 {
  position: absolute;
  top: 373px;
  left: 94px;
}
.text4 {
  position: absolute;
  top: 480px;
  right: 92px;
  width: 250px;
  height: 27px;
  font-size: 28px;
  font-family: Arial;
  font-weight: bold;
  color: #00b0f0;
}
.btn {
  position: absolute;
  left: 95px;
  bottom: 92px;
  width: 584px;
  height: 75px;
  background: linear-gradient(90deg, #5f20d4 0%, #2e68f6 100%);
  border-radius: 20px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  font-weight: bold;
  color: #fefefe;
}
</style>